<template>
  <div class="container">
    <el-card>
      <!-- 表单区域 开始-->
      <el-form
        :model="form"
        :rules="formRules"
        ref="formRefs"
        label-width="80px"
      >
        <!-- 第一行 -->
        <el-row :gutter="2">
          <el-col :span="24">
            <div class="grid-content">
              <el-form-item>
                <el-button
                  type="success"
                  icon="el-icon-edit"
                  size="small"
                  class="choice_btn"
                  @click="addChoice"
                  >新增试题</el-button
                >
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <!-- 第二行 -->
        <el-row :gutter="12">
          <el-col :span="6">
            <div class="grid-content">
              <el-form-item label="学科" prop="subjectID">
                <el-select
                  v-model="form.subjectID"
                  placeholder="请选择"
                  @change="selectedChange(form.subjectID)"
                >
                  <el-option
                    v-for="(item, i) in subjectList"
                    :key="i"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content">
              <el-form-item label="二级目录" prop="directory">
                <el-select v-model="form.directory" placeholder="请选择">
                  <el-option
                    v-for="item in subjectDirectorysList"
                    :key="item.id"
                    :label="item.directoryName"
                    :value="item.directoryName"
                  ></el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content">
              <el-form-item label="标签" prop="tags">
                <el-select v-model="form.tags" placeholder="请选择">
                  <el-option
                    v-for="item in tagsMenu"
                    :key="item.id"
                    :label="item.tagName"
                    :value="item.tagName"
                  ></el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content">
              <el-form-item label="关键字" prop="keyword">
                <el-input v-model="form.keyword"></el-input>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <!-- 第三行 -->
        <el-row :gutter="12">
          <el-col :span="6">
            <div class="grid-content">
              <el-form-item label="试题类型" prop="questionType">
                <el-select v-model="form.questionType" placeholder="请选择">
                  <el-option
                    v-for="item in questionTypeBox"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content">
              <el-form-item label="难度" prop="difficulty">
                <el-select v-model="form.difficulty" placeholder="请选择">
                  <el-option
                    v-for="item in difficultyBox"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content">
              <el-form-item label="方向" prop="direction">
                <el-select v-model="form.direction" placeholder="请选择">
                  <el-option
                    v-for="(item, i) in directionBox"
                    :key="i"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content">
              <el-form-item label="录入人" prop="creatorID">
                <el-select
                  v-model="form.creatorID"
                  placeholder="请选择"
                  @change="handleCreatedID(form.creatorID)"
                >
                  <el-option
                    v-for="(item, i) in usersList"
                    :key="i"
                    :value="item.username"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <!-- 第四行 -->
        <el-row :gutter="12">
          <el-col :span="6">
            <div class="grid-content">
              <el-form-item label="题目备注" prop="remarks">
                <el-input v-model="form.remarks"></el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content">
              <el-form-item label="企业简称" prop="shortName">
                <el-input v-model="form.shortName"></el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content">
              <el-form-item label="城市" prop="province">
                <el-select
                  class="provinceSelect"
                  style="width: 50%"
                  v-model="form.province"
                  placeholder="请选择"
                  @change="selectedProvince(form.province)"
                >
                  <el-option
                    v-for="(item, i) in provincesList"
                    :key="i"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
                <el-select
                  style="width: 50%"
                  v-model="form.city"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="(item, i) in citysList"
                    :key="i"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content">
              <el-form-item label-width="0px">
                <el-button
                  type="primary"
                  @click="onSubmit('choiceSelectedForm')"
                  class="choice_btn selected_btn"
                  >搜索</el-button
                >
                <el-button
                  @click="resetForm('choiceSelectedForm')"
                  class="choice_btn"
                  >清除</el-button
                >
              </el-form-item>
            </div>
          </el-col>
        </el-row>
      </el-form>
      <!-- 表单区域 结束-->
      <!-- tab 标签页区域 -->
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <!-- alert 消息提示框 -->
        <el-alert type="info" show-icon>
          <template slot="title"> 数据一共 {{ counts }} 条 </template>
        </el-alert>

        <el-tab-pane
          :label="key"
          :name="val"
          v-for="(val, key) in checkStatus"
          :key="key"
        >
          <!-- table 区域 -->
          <el-table :data="choiceLise">
            <el-table-column
              prop="number"
              label="试题编号"
              width="120px"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="subject"
              label="学科"
              width="100px"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="catalog"
              label="目录"
              width="120px"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="questionType"
              label="题型"
              width="120px"
              align="center"
            >
              <template slot-scope="scope">
                <div v-if="scope.row.questionType === '1'">单选</div>
                <div v-else-if="scope.row.questionType === '2'">多选</div>
                <div v-else-if="scope.row.questionType === '3'">简答</div>
              </template>
            </el-table-column>
            <el-table-column label="题干" width="320px" align="center">
              <template slot-scope="scope">
                <span v-html="scope.row.question"></span>
              </template>
            </el-table-column>
            <el-table-column
              prop="addDate"
              label="录入时间"
              width="220px"
              align="center"
            >
            </el-table-column>
            <el-table-column label="难度" width="120px" align="center">
              <template slot-scope="scope">
                <div v-if="scope.row.difficulty === '1'">简单</div>
                <div v-else-if="scope.row.difficulty === '2'">一般</div>
                <div v-else-if="scope.row.difficulty === '3'">困难</div>
              </template>
            </el-table-column>
            <el-table-column
              prop="creator"
              label="录入人"
              width="120px"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="chkState"
              label="审核状态"
              width="120px"
              align="center"
            >
              <template slot-scope="scope">
                <div v-if="scope.row.chkState === 0">待审核</div>
                <div v-else-if="scope.row.chkState === 1">已审核</div>
                <div v-else-if="scope.row.chkState === 2">已拒绝</div>
              </template>
            </el-table-column>
            <el-table-column
              prop="chkRemarks"
              label="审核意见"
              width="220px"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="chkUser"
              label="审核人"
              width="120px"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="publishState"
              label="发布状态"
              width="120px"
              align="center"
            >
              <template slot-scope="scope">
                <div v-if="scope.row.publishState === 0">已下架</div>
                <div v-else-if="scope.row.publishState === 1">已发布</div>
                <div v-else>待发布</div>
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              width="250px"
              fixed="right"
              align="center"
            >
              <template slot-scope="scope">
                <el-button type="text" @click="showYulanDialog(scope.row)"
                  >预览</el-button
                >

                <el-button
                  type="text"
                  @click="showShenheDialog(scope.row)"
                  :disabled="scope.row.chkState === 0 ? false : true"
                  >审核</el-button
                >
                <el-button
                  type="text"
                  :disabled="scope.row.publishState === 1 ? false : true"
                  @click="editChoice(scope.row)"
                  >修改</el-button
                >
                <el-button
                  type="text"
                  @click="shangjiaChoice(scope.row)"
                  v-if="scope.row.publishState === 0"
                  >上架</el-button
                >
                <el-button
                  type="text"
                  @click="shangjiaChoice(scope.row)"
                  v-else-if="scope.row.publishState === 1"
                  >下架</el-button
                >
                <el-button
                  type="text"
                  :disabled="scope.row.publishState === 1 ? true : false"
                  @click="deleteChoice(scope.row.id)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <!-- pagination 分页 -->

          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="choiceQueryInfo.page"
            :page-sizes="[1, 2, 3, 10]"
            :page-size="choiceQueryInfo.pagesize"
            layout=" prev, pager, next,sizes, jumper"
            :total="counts"
          >
          </el-pagination>
        </el-tab-pane>
      </el-tabs>
      <!-- 题目预览对话框 -->
      <el-dialog
        title="题目预览"
        :visible.sync="yulan_dialogVisible"
        width="50%"
      >
        <div class="choice_yulan">
          <el-row class="choice_row">
            <el-col :span="6" v-if="yulanData.questionType === '1'"
              >【题型】：单选题</el-col
            >
            <el-col :span="6" v-if="yulanData.questionType === '2'"
              >【题型】：多选题</el-col
            >
            <el-col :span="6" v-if="yulanData.questionType === '3'"
              >【题型】：简答题</el-col
            >
            <el-col :span="6">【编号】：{{ yulanData.id }}</el-col>
            <el-col :span="6" v-if="yulanData.difficulty === '1'"
              >【难度】：简单</el-col
            >
            <el-col :span="6" v-else-if="yulanData.difficulty === '2'"
              >【难度】：简单</el-col
            >
            <el-col :span="6" v-else-if="yulanData.difficulty === '3'"
              >【难度】：简单</el-col
            >
            <el-col :span="6">【标签】：{{ yulanData.tags }}</el-col>
          </el-row>
          <el-row class="choice_row">
            <el-col :span="6">【学科】：{{ yulanData.subjectName }}</el-col>
            <el-col :span="6">【目录】：{{ yulanData.directoryName }}</el-col>
            <el-col :span="6">【方向】：{{ yulanData.direction }}</el-col>
          </el-row>
          <el-divider></el-divider>
          <el-row>【 题干 】：</el-row>
          <el-row
            class="yulanData_question"
            v-html="yulanData.question"
          ></el-row>
          <el-row v-if="yulanData.questionType === '1'"
            >单选题 选项：(以下选中的选项为正确答案)</el-row
          >
          <el-row v-else-if="yulanData.questionType === '2'"
            >多选题 选项：(以下选中的选项为正确答案)</el-row
          >
          <el-row class="pre_checkbox">
            <!-- 单选框 -->
            <el-radio-group
              v-if="yulanData.questionType === '1'"
              v-model="radioIsRight"
            >
              <el-row v-for="(item, i) in yulanData.options" :key="i">
                <el-radio :label="item.isRight">{{ item.title }}</el-radio>
              </el-row>
            </el-radio-group>
            <!-- 多选框 -->
            <el-checkbox-group
              v-if="yulanData.questionType === '2'"
              v-model="yulanData.options"
            >
              <el-row v-for="(item, i) in yulanData.options" :key="i">
                <el-checkbox
                  :label="item.title"
                  :checked="item.isRight ? true : false"
                  >{{ item.title }}</el-checkbox
                >
              </el-row>
            </el-checkbox-group>
          </el-row>
          <el-divider></el-divider>
          <el-row>
            【参考答案】：
            <el-button type="danger" @click="addVideo">视频答案预览</el-button>
            <el-row>
              <video
                v-if="display_video"
                :src="video_src"
                autoplay
                class="video_preview"
                controls
              ></video>
            </el-row>
          </el-row>
          <el-divider></el-divider>
          <el-row
            >【答案解析】：<el-link
              type="info"
              :underline="false"
              v-html="yulanData.answer"
            ></el-link
          ></el-row>
          <el-divider></el-divider>
          <el-row>【题目备注】：{{ yulanData.chkRemarks }}</el-row>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="closedYulanDialog">关 闭</el-button>
        </span>
      </el-dialog>
      <!-- 题目审核对话框 -->
      <el-dialog
        title="题目审核"
        :visible.sync="shenhe_dialogVisible"
        width="20%"
      >
        <el-form :model="checkForm">
          <el-form-item>
            <el-radio-group
              v-model="checkForm.chkState"
              @change="shenhe_radioChang(checkForm.chkState)"
            >
              <el-radio :label="1">通过</el-radio>
              <el-radio :label="2">拒绝</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <el-input type="textarea" v-model="checkForm.chkRemarks"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="shenhe_cancel">取消</el-button>
          <el-button type="primary" @click="shenhe_commit">确认</el-button>
        </span>
      </el-dialog>
      <!-- ------ 结束标签 ----- -->
    </el-card>
  </div>
</template>

<script>
import {
  choice,
  detail,
  choiceCheck,
  choicePublish,
  remove as removeChoice,
} from "@/api/hmmm/questions";
// 学科目录
import {
  list as subjectList,
  simple as simpleSubjectList,
} from "@/api/hmmm/subjects";
// 学科目录
import { list as directorysList } from "@/api/hmmm/directorys";
// 标签目录
import { list as tagslistRquest } from "@/api/hmmm/tags";
// 导入方向
import {
  direction,
  difficulty,
  questionType,
  chkType,
  publishType,
} from "@/api/hmmm/constants";
// 导入城市/区 数据
import { provinces, citys } from "@/api/hmmm/citys";
// 导入用户列表
import { simple } from "@/api/base/users";

// vuex 组件传值
import { mapState, mapMutations } from "vuex";

export default {
  name: "question_choice",
  data() {
    return {
      // ----------------------------
      form: {
        subject: "",
        directory: "",
        direction: "",
        subjectID: "", //学科
        difficulty: "", //难度
        questionType: "", //试题类型
        tags: "", //标签名称
        province: "", //企业所在地省份
        city: "", //企业所在地城市
        keyword: "", //关键字
        remarks: "", //题目备注
        shortName: "", //企业简称
        direction: "", //方向
        creatorID: "", //录入人
        catalogID: "", //目录
        chkState: "", //审核状态
        chkRemarks: "", //审核评论
      },
      formRules: {
        subject: [],
        directory: [],
        direction: [],
        subjectID: [],
        difficulty: [],
        questionType: [],
        tags: [],
        province: [],
        city: [],
        keyword: [],
        remarks: [],
        shortName: [],
        direction: [],
        creatorID: [],
        catalogID: [],
        chkState: [],
        chkRemarks: [],
      },
      // 审核表单
      checkForm: {
        id: "",
        chkState: "",
        chkRemarks: "",
      },
      // 上下架查询参数
      shangjiaQueryInfo: {
        id: "",
        publishState: "",
      },
      // 预览题型数据
      yulanData: {},
      video_src: "",
      radioIsRight: 1,
      //  不绑定的时候给 空字符串
      display_video: false,
      // 获取试题详情查询参数
      detailQueryInfo: {
        id: "",
      },
      value: "",
      directionBox: [],
      difficultyBox: [],
      questionTypeBox: [],
      chkTypeBox: [],
      publishType: [],
      creatorIDList: [],
      // 省份列表
      provincesList: [],
      citysList: [],
      choiceQueryInfo: {
        page: 1, // 当前页数
        pagesize: 10, //页尺寸
        creatorID: 1, //录入人
      },
      // 精选题库列表
      choiceLise: [],
      // 精选题库总记录数
      counts: 0,
      // tab页切换标题
      checkStatus: {
        全部: "99",
        待审核: "0",
        已审核: "1",
        已拒绝: "2",
      },
      activeName: "99",
      // 获取学科列表的查询参数
      subjectQuery: {
        page: 1,
        pagesize: 10,
        // subjectName:'大数据'
      },
      // 学科列表数据
      subjectList: [],
      // 获取学科目录列表的查询参数
      queryDirectorys: {
        page: 1,
        pagesize: 100,
        subjectID: "", //学科ID
      },
      // 学科目录列表数据
      subjectDirectorysList: [],
      // 获取查询标签列表的查询参数
      tagsQuery: {
        page: 1,
        pagesize: 100,
        subjectID: "",
        // tagName:'',
        // state:''
      },
      tagsMenu: [],
      // 题目预览对话框 显示与隐藏
      yulan_dialogVisible: false,
      // 题目审核对话框 显示与隐藏
      shenhe_dialogVisible: false,

      usersList: [],
    };
  },
  methods: {
    onSubmit(form) {
      //  遍历对象中的属性和属性值
      const obj = this.form;
      for (let key in obj) {
        if (obj[key] === "") {
          delete obj[key];
        }
      }
      this.choiceQueryInfo = this.form;
      this.getChoiceList();
    },
    resetForm(form) {
      this.selectedProvince();
      this.$refs.formRefs.resetFields();
      (this.choiceQueryInfo = {
        page: 1, // 当前页数
        pagesize: 10, //页尺寸
      }),
        this.getChoiceList();
    },
    // tab 分页的点击事件
    handleClick(tab, event) {
      if (tab.name === "99") {
        this.choiceQueryInfo["chkState"] = "";
        //  删除对象中的某个属性
        delete this.choiceQueryInfo.chkState;
        this.getChoiceList();
      } else if (tab.name === "0") {
        this.choiceQueryInfo["chkState"] = "0";
        this.getChoiceList();
      } else if (tab.name === "1") {
        this.choiceQueryInfo["chkState"] = "1";
        this.getChoiceList();
      } else if (tab.name === "2") {
        this.choiceQueryInfo["chkState"] = "2";
        this.getChoiceList();
      } else {
        return this.$message.error("切换精选题库列表失败！");
      }
    },

    // 获取精选题库列表
    async getChoiceList() {
      try {
        const { data } = await choice(this.choiceQueryInfo);
        this.choiceLise = data.items;
        this.counts = data.counts;
        //  if(Math.random()>0.5){
        //    throw new Error
        //  }
        // this.$message.success('获取精选题库列表成功！')
      } catch (err) {
        this.$message.error("获取精选题库列表失败！");
      }
    },
    // 分页事件处理 1
    handleSizeChange(val) {
      this.choiceQueryInfo.pagesize = val;
      this.getChoiceList();
    },
    //  分页事件处理 2
    handleCurrentChange(val) {
      this.choiceQueryInfo.page = val;
      this.getChoiceList();
    },
    // 获取 学科 列表
    async getSubjects() {
      try {
        const { data } = await simpleSubjectList(this.subjectQuery);
        this.subjectList = data;
      } catch {
        this.$message.error("获取学科列表失败");
      }
    },
    // 获取学科目录
    async getSubjectDirectorys() {
      try {
        const { data } = await directorysList(this.queryDirectorys);
        console.log("getSubjectDirectorys", data);
        this.subjectDirectorysList = data.items;
      } catch (err) {
        console.log(err);
      }
    },
    // 获取tags目录
    async getTags() {
      try {
        const { data } = await tagslistRquest(this.tagsQuery);
        this.tagsMenu = data.items;
      } catch (err) {
        console.log(err);
      }
    },
    // 学科列表选中时触发的事件
    selectedChange(id) {
      // 发生改变时，先清空二级目录和tags 选中的值
      this.form.directory = "";
      this.form.tags = "";
      this.queryDirectorys.subjectID = id;
      this.getSubjectDirectorys();
      this.tagsQuery.subjectID = id;
      this.getTags();
    },
    // 省份 selecte框选中值改变时
    selectedProvince(province) {
      this.form.city = "";
      this.citysList = citys(province);
    },
    // 新增试题 跳转路由
    addChoice() {
      this.$router.push("/questions/new");
    },
    // 预览题目对话框 显示
    async showYulanDialog(val) {
      try {
        this.yulan_dialogVisible = true;
        // 根据id 获取option
        this.detailQueryInfo.id = val.id;
        const { data } = await detail(this.detailQueryInfo);
        this.yulanData = data;
      } catch (err) {
        console.log(err);
      }
    },
    // 添加视频加载
    addVideo() {
      this.video_src = this.yulanData.videoURL;
      this.display_video = true;
    },
    // 预览题目对话框 关闭
    closedYulanDialog(val) {
      this.display_video = false;
      this.yulan_dialogVisible = false;
    },

    // 显示题目审核对话框
    showShenheDialog(val) {
      this.checkForm.id = val.id;
      this.shenhe_dialogVisible = true;
    },
    // 审核对话框radio change事件
    shenhe_radioChang(value) {
      this.checkForm.chkState = value;
      // console.log('审核参数',this.checkForm);
    },
    // 审核对话框确定按钮
    async shenhe_commit() {
      //  发送审核请求，携带id 和评论 参数
      try {
        console.log("审核参数", this.checkForm);

        // 判断意见是否为空，空则提示
        if (this.checkForm.chkRemarks.trim().length === 0) {
          return this.$message({ message: "请输入审核意见", type: "warning" });
        }
        const { data } = await choiceCheck(this.checkForm);
        this.$message.success("操作成功");
        //  更新审核后的 渲染的试题列表
        this.getChoiceList();
        // 清空表单 单选按钮选中状态和 评论
        this.checkForm.chkState = "";
        this.checkForm.chkRemarks = "";
        this.shenhe_dialogVisible = false;
      } catch (err) {
        this.$message.error("操作失败！");
      }
    },
    // 审核对话框取消按钮事件
    shenhe_cancel() {
      // 清空表单 单选按钮选中状态和 评论
      this.checkForm.chkState = "";
      this.checkForm.chkRemarks = "";
      this.shenhe_dialogVisible = false;
    },
    // 修改按钮点击事件,跳转到录入页面  ,携带参数
    editChoice(choiceRow) {
      // console.log('选择修改的试题',choiceRow);

      this.$router.push({
        path: "/questions/new",
        query: {
          editid: choiceRow,
          editname: "question_choice",
        },
      });
    },
    // 上下架
    shangjiaChoice(row) {
      this.shangjiaQueryInfo.id = row.id;
      if (row.publishState === 0) {
        //  弹窗，确定上架
        this.$confirm("您确认上架这道题目吗?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(async () => {
            // 上架请求
            try {
              // 发送上下架请求
              const { data } = await choicePublish(this.shangjiaQueryInfo);
              //  更新上下架后的 渲染的试题列表  ????没有自动刷新，该属性值是否绑定错误？
              this.getChoiceList();
            } catch (err) {
              this.$message.error("操作失败！");
            }
            this.$message({
              type: "success",
              message: "上架成功!",
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消上架",
            });
          });
        // 弹窗结束
        this.shangjiaQueryInfo.publishState = 1;
      } else {
        //  弹窗，确定下架
        this.$confirm("您确认下架这道题目吗?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(async () => {
            // 上架请求
            try {
              // 发送上下架请求
              const { data } = await choicePublish(this.shangjiaQueryInfo);
              console.log("上下架", data);
              //  更新上下架后的 渲染的试题列表
              this.getChoiceList();
            } catch (err) {
              this.$message.error("操作失败！");
            }
            this.$message({
              type: "success",
              message: "下架成功!",
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消下架",
            });
          });
        // 弹窗结束
        this.shangjiaQueryInfo.publishState = 0;
      }
    },

    // 处理录入人id与name对应问题
    handleCreatedID(name) {
      if (name === "超级管理员") {
        this.choiceQueryInfo.creatorID = 2;
      } else this.choiceQueryInfo.creatorID = 1;
    },

    // 删除精选
    deleteChoice(id) {
      this.$confirm("此操作将永久删除该题目, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const { data } = await removeChoice({ id });
          this.getChoiceList();
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    async getuser() {
      const { data } = await simple();
      this.usersList = data;
    },
  },
  created() {
    this.getChoiceList();
    this.getSubjects();
    this.getSubjectDirectorys();
    this.directionBox = direction;
    this.difficultyBox = difficulty;
    this.questionTypeBox = questionType;
    this.chkTypeBox = chkType;
    this.publishTypeBox = publishType;
    this.provincesList = provinces();
    this.getuser();
  },
};
</script>

<style scoped lang='less'>
// 表单区域样式
.choice_btn {
  float: right;
}
.selected_btn {
  margin-left: 5px;
}
.el-row {
  margin-bottom: 0px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.grid-content {
  min-height: 36px;
}

.el-select {
  width: 100%;
}
// 表单区域样式

.el-card {
  padding: 0;
  margin: 20px 12px;
}
.el-alert {
  margin-bottom: 20px;
}
.el-pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
// 预览对话框样式
.el-dialog__body {
  padding: 30px 20px 10px 20px;
}
.choice_yulan {
  margin-bottom: 0px;
  .choice_row {
    margin-bottom: 20px;
  }
}
.yulanData_question {
  color: blue;
}
.video_preview {
  width: 400px;
  height: 230px;
}
/deep/.pre_checkbox,
.el-radio,
.el-checkbox {
  margin-top: 10px;
}
.anser_jiexi {
  width: 300px;
}

</style>
